<template>
  <!-- 服务合同计量 -->
  <div class="contract-wrap">
    <div class="title-wrap">
      <div class="title">
        <div class="dot"></div>
        服务合同计量
      </div>
    </div>
    <div class="content-wrap">
      <div class="contract" v-for="(item, index) in dataList" :key="item.type">
        <!-- 标题行 -->
        <div class="contract-title">
          <div>{{ item.type }}</div>
          <div>
            {{ Number(item.amount).toFixed(2) }}万元 /
            <span>{{ Number(item.payAmount).toFixed(2) }}万元</span>
          </div>
        </div>
        <!-- 单个图表 -->
        <div class="contract-content" :id="`service-contract-${index}`"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'serviceContract',
  data() {
    return {
    };
  },
  props: {
    projectId: {
      type: String,
      default: "", // 空为多项目
    },
    dataList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    projectId: {
      handler(val) {
        this.$nextTick(() => {
          this.drawContent();
        });
      },
      immediate: true
    },
    dataList: {
      handler(val) {
        this.$nextTick(() => {
          this.drawContent();
        });
      },
      immediate: true
    }
  },

  methods: {
    drawContent() {
      const colors = [['#1e70fa', '#e4ecfc'], ['#00CE9F', '#D4F7EF'], ['#E8AA00', '#F4E9D0'], ['#7547F2', '#E6E1F5']];
      this.dataList.forEach((item, index) => {
        this.initContractVerticalBar(
          item.list.map(contract => {
            return {
              name: contract.title,
              number: contract.number ? contract.number : '',
              // percentage: contract.rate * 100 > 100 ? 100 : (contract.rate * 100).toFixed(0),
              percentage: ((contract.measureAmount / contract.amount) * 100).toFixed(0),
              total: contract.amount,
              monthCount: contract.measureAmount
            };
          }),
          colors[index % colors.length],
          `serviceContract${index}`,
          `service-contract-${index}`
        );
      });
    },
    initContractVerticalBar(data, colorList, vueThis, elementId) {
      // 显示项目简称还是合同编号
      if (this.projectId) {
        // 单项目，显示合同编号
        data.forEach((item, index) => {
          item.showText = item.number;
          let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
          if (reg.test(item.number)) {
            if (String(item.number).length > 5) {
              item.number = item.number.substring(0, 5);
            }
          } else {
            if (String(item.number).length > 7) {
              item.number = item.number.substring(0, 7);
            }
          }
        });
      } else {
        // 多项目，显示项目简称
        data.forEach((item, index) => {
          item.showText = item.name;
          let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g');
          if (reg.test(item.name)) {
            if (String(item.name).length > 5) {
              item.name = item.name.substring(0, 5);
            }
          } else {
            if (String(item.name).length > 7) {
              item.name = item.name.substring(0, 7);
            }
          }
        });
      }

      // 创建 echarts 实例
      let that = this;
      let chartsInit;
      if (this[vueThis]) {
        chartsInit = this[vueThis];
        chartsInit.clear();
      } else {
        const ele = document.getElementById(`${elementId}`);
        if (!ele) {
          return;
        }
        chartsInit = echarts.init(ele, null, { devicePixelRatio: 2 });
        this[vueThis] = chartsInit;
      }

      // 设置 dataZoom
      let dataZoom;
      let length = this.project ? data.map(item => item.number).length : data.map(item => item.name).length;
      if (data.length > 7) {
        dataZoom = [
          {
            type: 'slider',
            startValue: 0,
            endValue: 7,
            orient: 'vertical',
            zoomLock: true,
            left: 0,
            width: 10,
            height: '95%',
            brushSelect: false,
            showDetail: false //拖拽时候显示详细数值信息
          }
        ];
      }

      chartsInit.setOption({
        grid: {
          left: '80',
          top: '10',
          right: '0',
          bottom: '0'
        },
        dataZoom,
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(5,39,113,0.8)',
          position: (point, params, dom, rect, size) => {
            let x = 0; // x坐标位置
            let y = 0; // y坐标位置
            // 当前鼠标位置
            let pointX = point[0];
            let pointY = point[1];
            // 提示框大小
            let boxWidth = size.contentSize[0];
            let boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = pointX + 10;
            } else {
              // 左边放的下
              x = pointX - boxWidth - 10;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }
            return [x, y];
          },
          textStyle: {
            color: '#fff'
          },
          formatter: params => {
            let curItem = {};
            data.forEach((item, index) => {
              // 单项目
              if (this.projectId) {
                if (item.number == params[0].axisValue) {
                  curItem = item;
                }
              } else {
                // 多项目
                if (item.name == params[0].axisValue) {
                  curItem = item;
                }
              }
            });
            //console.log(curItem);
            return `合同名称：${curItem.showText}<br>合同金额：${curItem.total}万元<br>累计计量：${curItem.monthCount}万元<br>百分比：${curItem.percentage}%`;
          }
        },
        xAxis: {
          type: 'value',
          splitLine: { show: false }, //坐标轴在 grid 区域中的分隔线
          axisLabel: { show: false }, //坐标轴刻度标签
          axisTick: { show: false }, //坐标轴刻度
          axisLine: { show: false } //坐标轴轴线
        },
        yAxis: {
          type: 'category',
          inverse: true, // 上下排序
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            color: 'rgba(51, 51, 51, 1)',
            fontSize: this.autoSize(12), //自适应窗口宽度
            width: 70,
            overflow: 'truncate',
            formatter(name) {
              return name;
            }
          },
          data: this.projectId ? data.map(item => item.number) : data.map(item => item.name)
          //如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
        },
        series: [
          //系列列表。每个系列通过 type 决定自己的图表类型
          {
            name: '%', //系列名称
            type: 'bar', //柱状、条形图
            barWidth: 14, //柱条的宽度,默认自适应
            data: data.map(d => d.percentage), //系列中数据内容数组
            label: {
              //图形上的文本标签 %值的显示
              show: true,
              position: 'right', //标签的位置
              offset: [0, 1], //标签文字的偏移，此处表示向上偏移40
              // formatter: '{c}{a}', //标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
              color: colorList[0], //标签字体颜色
              fontSize: this.autoSize(12), //标签字号
              formatter: (params) => {
                // console.log(params.value)
                let value = params.value
                if (value < 80) {
                  return `{a|${value}%}`;
                } else {
                  return `{b|${value}%   }`;
                }
              },

              rich: {
                a: {
                  width: 60,
                  color: colorList[0],//框外显示用主色
                  align: 'left'
                },
                b: {
                  width: -60,
                  color: "#FFFFFF",//colorList[1],框内显示用白色
                  align: 'right'
                }
              },
            },
            itemStyle: {
              barBorderRadius: 10,
              color: colorList[0]
            },
            zlevel: 1 //柱状图所有图形的 zlevel 值,
          },
          {
            name: '进度条背景',
            type: 'bar',
            label: {
              //图形上的文本标签
              show: false,
              position: 'right', //标签的位置
              offset: [0, 0], //标签文字的偏移，此处表示向上偏移40
              // formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
              color: 'rgba(0,0,0,.7)', //标签字体颜色
              fontSize: `${this.$publicJs.nowSize(12)}` //标签字号
            },
            barGap: '-100%', //不同系列的柱间距离，为百分比。
            // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
            // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
            //并且是对此坐标系中所有 'bar' 系列生效。
            barWidth: 14,
            data: this.getShaDow(data),
            color: colorList[1], //柱条颜色
            itemStyle: {
              barBorderRadius: 10
            }
          }
        ]
      });
      chartsInit.resize();
    },

    getShaDow(val) {
      let arr = [];
      for (let i = 0; i < val.length; i++) {
        arr.push(100);
      }
      return arr;
    },
    autoSize(val, initWidth = 1920) {
      let nowClientWidth = document.documentElement.clientWidth;
      return val * (nowClientWidth / initWidth);
    },

  }
};
</script>
<style lang="scss" scoped>
.contract-wrap {
  width: 100%;
  height: 460px;
  background-color: #fff;
  border-radius: 15px;
  padding: 16px 24px 24px 24px;
}

.title-wrap {
  display: flex;
  height: 45px;
  border-bottom: 1px #e6e8ef solid;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  align-items: center;

  .title {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    font-size: 16px;
    flex-shrink: 0;
    align-items: center;
    .dot {
      height: 4px;
      width: 4px;
      background-color: #005fff;
      border-radius: 4px;
      margin-right: 8px;
    }
  }
}

.content-wrap {
  display: flex;
  justify-content: space-between;
  height: calc(100% - 55px);
  width: 100%;
  overflow-y: auto;
}

.contract {
  width: 424px;
  height: 348px;
  background-color: #f9f9f9;
  border-radius: 15px;
  padding: 30px 36px 10px;

  .contract-title {
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    border-bottom: rgba(206, 206, 206, 0.7) 1px solid;

    & > div:first-of-type {
      color: #1c1e24;
      font-size: 14px;
      font-weight: bold;
    }

    & > div:last-of-type {
      color: #1c1e24;
      font-size: 14px;

      & > span {
        color: #df2a2a;
      }
    }
  }

  .contract-content {
    width: 100%;
    height: calc(100% - 30px);
  }
}
</style>
